<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>任务标注</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/scroll-bar.css">
    <link rel="stylesheet" href="../css/sub-page.css">
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../lib/nprogress/nprogress.css">
    <style>
        .site-demo-flow {
            width: 100%;
            text-align: center;
        }

        #tags div {
            margin-bottom: 8px;
            width: 50%;
            float: right;
        }

        #tags span {
            font-size: 20px;
            height: 20px;
        }
    </style>
</head>

<body>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

    <input class="layui-hide" id='id' value="">
    <input class="layui-hide" id='taskid' value="">
    <!--  <div class="ok-body">
        <div class="ok-body-breadcrumb" style="border-bottom: 0px solid #e5e5e5;">
            <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
                <i class="layui-icon layui-icon-next">刷新</i>
            </a>
        </div>
    </div> -->
    <form class="layui-form" action="">
        <div class="layui-container" style="width:100%;">


            <!-- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>标注</legend>
        </fieldset> -->

            <div class="layui-row">
                <div class="layui-col-xs8">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>图片区域</legend>
                    </fieldset>
                    <div class="site-demo-flow" id="pic">
                        <!-- <img src="https://res.layui.com/images/layui/demo/3.png"> -->
                    </div>
                </div>

                <div class="layui-col-xs3">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>多选标签</legend>
                    </fieldset>
                    <div class="layui-input-block" style="margin-left: 35px;" id="tags">
                        <!-- <div class="layui-col-md12">
                            <input type="radio" name="tag" value="男" title="男111111111111111111111111111" checked="">
                        </div>
                        <div class="layui-col-md12">
                            <input type="radio" name="tag" value="男" title="男">
                        </div>-->

                    </div>
                </div>
                <div class="layui-col-xs1">
                    <div style="background:white;">
                        <div class="ok-body">
                            <div class="ok-body-breadcrumb" style="border-bottom: 0px solid #e5e5e5;">
                                <a class="layui-btn layui-btn-small layui-bg-red" id="revise" title="驳回">
                                    <i class="layui-icon">驳 回</i>
                                </a>
                            </div>
                            <div class="ok-body-breadcrumb" style="border-bottom: 0px solid #e5e5e5;">
                                <a class="layui-btn layui-btn-small" id="submit" title="下一项">
                                    <i class="layui-icon layui-icon-next">下一项</i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </form>
    <!--js逻辑-->
    <script src="../lib/layui/layui.js"></script>
    <script src="../lib/nprogress/nprogress.js"></script>
    <script src="../../js/config.js"></script>
    <script>
        NProgress.start();
        window.onload = function () {
            NProgress.done();
        }
        var spent = 0; //页面停留时长 （单位秒）
        var timer;

        function setDate() {
            spent++;
            //console.log('spent:' + spent);
            timer = setTimeout('setDate()', 1000);
        }
        var $;

        var resourceid = '';
        var selected_tag = [];

        function load(form) {
            if (timer) {
                clearTimeout(timer);
            }
            spent = 0; //时间重置
            //内容区域重置
            $('#tags').html('');
            $('#pic').html('');
            selected_tag = [];



            $.ajax({
                url: '/workflow/gettaskitem',
                method: 'post',
                data: {
                    dsid: $('#id').val(),
                    actions: '3' //标注引擎(1=数据清洗 2=单分类 3=多分类 4=多点标注 )
                },
                dataType: 'JSON',
                success: function (res) {
                    //console.log(res);
                    if (res.code == 1) {
                        if (res.data.length == 0) {
                            layer.msg('暂无待处理的任务', {
                                icon: 6,
                                time: 1000 //3秒关闭（如果不配置，默认是3秒）
                            }, function () {
                                window.parent.layer.closeAll();
                            });
                        }
                        console.log(res.data);
                        //加载标签区域
                        if (res.data[0].tasktags == undefined) {
                            load();
                        } else {
                            var tags = res.data[0].tasktags.replace(/，/g, ",");
                            tags = tags.split(',');
                        }

                        var labels = res.data[0].label == null ? [''] : JSON.parse(res.data[0].label).outputs;
                        // console.log(labels);

                        for (let i = 0; i < tags.length; i++) {
                            const tag = tags[i];
                            var ischecked = false;
                            for (let j = 0; j < labels.length; j++) {
                                const label = labels[j].name;
                                if (label == tag) {
                                    ischecked = true;
                                }
                            }
                            if (ischecked) {
                                selected_tag.push(tag);
                                $('#tags').append(
                                    '<input type="checkbox" lay-filter="tag" name="tag" checked lay-skin="primary" value="' +
                                    tag + '" title="' + tag + '">');
                            } else {
                                $('#tags').append(
                                    '<input type="checkbox" lay-filter="tag" name="tag"  lay-skin="primary" value="' +
                                    tag + '" title="' + tag + '">');
                            }
                        }
                        //图片区域
                        var src = res.data[0].path;
                        console.log(src);
                        src = src.replace(/\\/g, "/").replace(
                            new RegExp(share_folder_root, 'gm'),
                            'http://resource.westalgo.com');
                        $('#pic').html('<img  onload="resizeimg(this)"  src="' + src + '">');

                        resourceid = res.data[0].resourceid;
                        try {
                            form.render();
                        } catch (error) {
                            setTimeout(() => {
                                form.render();
                            }, 500);
                        }
                        setDate();
                    } else {
                        console.log('数据加载失败,自动重新加载中...');
                        load();
                    }
                },
                error: function (data) {}
            })
        }
        layui.use(['flow', 'element', 'form', 'jquery'], function () {
            var element = layui.element;
            var flow = layui.flow;
            $ = layui.jquery;
            var form = layui.form;

            load(form);


            $('#submit').click(function () {
                if (selected_tag.length == 0 && resourceid.length > 0) {
                    layer.msg('请选择分类标签');
                    return false;
                }

                //console.log(selected_tag);

                //提交数据
                $.ajax({
                    url: '/workflow/marksubmit',
                    method: 'post',
                    data: {
                        dsid: $('#id').val(),
                        taskid: $('#taskid').val(),
                        selectedids: JSON.stringify([]),
                        unselectedids: JSON.stringify([resourceid]),
                        spent: spent,
                        currentflow: 'rndinspect',
                        actions: '3', //标注引擎(1=数据清洗 2=单分类 3=多分类 4=多点标注 )
                        selected_tag: JSON.stringify(selected_tag)
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res);
                        if (res.code == 1) {
                            load(form);
                        } else if (res.code == -1) {
                            layer.msg(res.msg);
                            layer.closeAll();
                        } else {
                            layer.msg('数据处理失败');
                        }
                    },
                    error: function (data) {
                        layer.msg('数据处理失败');
                    }
                })

            });
            $('#revise').click(function () {

                //提交数据
                $.ajax({
                    url: '/workflow/marksubmit',
                    method: 'post',
                    data: {
                        dsid: $('#id').val(),
                        taskid: $('#taskid').val(),
                        selectedids: JSON.stringify([resourceid]),
                        unselectedids: JSON.stringify([]),
                        spent: spent,
                        currentflow: 'inspect',
                        actions: '3', //标注引擎(1=数据清洗 2=单分类 3=多分类 4=多点标注 )
                        selected_tag: JSON.stringify(selected_tag)
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res);
                        if (res.code == 1) {
                            load(form);
                        } else if (res.code == -1) {
                            layer.msg(res.msg);
                            layer.closeAll();
                        } else {
                            layer.msg('数据处理失败');
                        }
                    },
                    error: function (data) {
                        layer.msg('数据处理失败');
                    }
                })

            });

            form.on('checkbox(tag)', function (data) {
                /* console.log(data.elem);*/
                //console.log(data);
                if (this.checked) {
                    selected_tag.push(data.value);
                } else {
                    var index = selected_tag.indexOf(data.value);
                    selected_tag.splice(index, 1);
                }
            });
        });
    </script>

</body>

</html>